<template>
  <div class="main">
    <section>
      <search-form
        :listQuery="queryParams"
        :queryConfig="queryConfig"
        :labelWidth="100"
        :search="search"
      />
      <el-button v-if="rightsButtons['sync']" type="primary" class="btn-block" :loading="syncdelay" @click="doSyncTagList">马上同步</el-button>
      <el-table
        v-loading="loading"
        :data="list"
        element-loading-text="给我一点时间"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          align="center"
          label="商品栏目ID"
        >
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="类型"
          width="130"
        >
          <template slot-scope="scope">
            <span>{{scope.row.type === "TAG_TOPIC" ? "精选类型" : "热门活动"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="topicId/activityId"
          width="210"
        >
          <template slot-scope="scope">
            <span>{{scope.row.topicId}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="栏目名"
          prop="merchantName"
          min-width="160"
        >
          <template slot-scope="scope">
            <span>{{scope.row.topicName}}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="活动开始时间"
          width="90"
        >
          <template slot-scope="scope">
            <span>{{scope.row.startTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="活动结束时间"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{scope.row.endTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="添加时间"
          width="110"
        >
          <template slot-scope="scope">{{scope.row.createdAt}}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          min-width="160"
        >
          <template slot-scope="scope">
            <span>{{scope.row.deleteFlag===1?'有效':'无效'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="80" v-if="rightsButtons['delete']">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="handleDeleteTag(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="queryParams.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      ></el-pagination>
    </section>
  </div>
</template>
<script>
import searchForm from '@/components/searchForm/index'
import { getTkTagsList, deleteTkTag, syncTkTag } from '@/api/bihuasuan/goods'

export default {
  name: 'b-goodsTkManage',
  components: {
    searchForm
  },

  data() {
    return {
      syncdelay: false,
      queryParams: {
        endTime: '',
        startTime: '',
        id: '',
        topicId: '',
        topicName: '',
        pageNum: 0,
        pageSize: 50
      },
      queryConfig: [
        {
          prop: 'id',
          type: 'input',
          label: '商品栏目ID'
        },
        {
          prop: 'topicName',
          type: 'input',
          label: '商品栏目名'
        },
        {
          prop: 'createDate',
          type: 'daterange',
          label: '活动时间'
        }
      ],
      loading: true,
      listTotal: 0,
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const { data } = await getTkTagsList(this.queryParams)
        this.loading = false
        this.list = data.list
        this.listTotal = data.total
      } catch (error) {
        console.log(error)
        this.list = []
        this.listTotal = 0
        this.loading = false
      }
    },
    async handleDeleteTag(id) {
      try {
        const { data } = await deleteTkTag({ id })
        if (data) {
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }
        this.getList()
      } catch (error) {
        console.log(error)
      }
    },
    async doSyncTagList() {
      this.syncdelay = true

      try {
        const { data } = await syncTkTag()
        if (data) {
          this.$message.success('同步成功')
          this.queryParams.pageNum = 1
          this.$children[0].resetForm('searchForm')
          this.getList()
        } else {
          this.$message.error('同步失败')
        }
        this.syncdelay = false
      } catch (err) {
        this.syncdelay = false
        this.$message.error('同步失败')
        console.log(err)
      }
    },
    search() {
      this.queryParams.pageNum = 1
      if (this.queryParams.createDate && this.queryParams.createDate[0]) {
        this.queryParams.startTime =
          this.queryParams.createDate[0] + ' 00:00:00'
        this.queryParams.endTime = this.queryParams.createDate[1] + ' 23:59:59'
      } else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }

      this.getList()
    },
    handleSizeChange(value) {
      this.queryParams.pageSize = value
      this.getList()
    },
    handleCurrentChange(value) {
      this.queryParams.pageNum = value
      this.getList()
    }
  }
}
</script>
